<template>
  <div class="userAvatar">
    <a-avatar :size="64" trigger-type="mask" @click="editCropper">
      <img
        alt="头像"
        src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
      />
      <template #trigger-icon>
        <icon-plus />
      </template>
    </a-avatar>
    <a-modal
      v-model:visible="modalVisible"
      title="修改头像"
      :width="600"
      :body-style="{ overflow: 'hidden' }"
      @open="modalOpen"
      @close="modalClose"
    >
      <a-row>
        <a-col :span="12" class="userAvatar-cropper">
          <vue-cropper
            v-if="cropperVisible"
            ref="cropper"
            :img="options.img"
            :info="true"
            :auto-crop="options.autoCrop"
            :auto-crop-width="options.autoCropWidth"
            :auto-crop-height="options.autoCropHeight"
            :fixed-box="options.fixedBox"
            @real-time="realTime"
          />
        </a-col>
        <a-col :span="12" class="userAvatar-upload">
          <div class="userAvatar-upload-preview">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </a-col>
      </a-row>
      <br />
      <a-space>
        <a-upload action="/" :show-file-list="false" @before-upload="beforeUpload">
          <template #upload-button>
            <a-button size="small">
              选择
              <icon-cloud />
            </a-button>
          </template>
        </a-upload>
        <a-button size="small" @click="changeScale(1)">
          <icon-plus />
        </a-button>
        <a-button size="small" @click="changeScale(-1)">
          <icon-minus />
        </a-button>
        <a-button size="small" @click="rotateLeft()">
          <icon-refresh rotate="180" />
        </a-button>
        <a-button size="small" @click="rotateRight()">
          <icon-refresh />
        </a-button>
        <a-button type="primary" size="small" @click="uploadImg()">提 交</a-button>
      </a-space>
    </a-modal>
  </div>
</template>

<script>
import { toRefs } from 'vue';
import { VueCropper } from 'vue-cropper';
import 'vue-cropper/dist/index.css';
import importConfig from './userAvatar.ts';

export default {
  name: 'UserAvatar',
  components: {
    VueCropper,
  },
  props: {
    user: {
      type: Object,
      default: null,
    },
  },
  setup(props) {
    const {
      base,
      proxy,
      init,
      editCropper,
      changeScale,
      rotateLeft,
      rotateRight,
      beforeUpload,
      uploadImg,
      realTime,
      modalOpen,
      modalClose,
    } = importConfig(props);

    return {
      ...toRefs(base),
      proxy,
      init,
      editCropper,
      changeScale,
      rotateLeft,
      rotateRight,
      beforeUpload,
      uploadImg,
      realTime,
      modalOpen,
      modalClose,
    };
  },
};
</script>

<style lang="less" scoped>
.userAvatar {
  &-cropper {
    height: 350px;
  }

  &-upload {
    height: 350px;
    position: relative;

    &-preview {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 150px;
      height: 150px;
      border-radius: 50%;
      box-shadow: 0 0 4px #ccc;
      overflow: hidden;
    }
  }
}

.avatar-upload-preview {
}
</style>
